<!DOCTYPE html>
<html lang="zh-Hans">

	<head>
		<meta charset="UTF-8">
		<title>爱OS</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<link rel="stylesheet" href="css/bootstrap.css">
		<link rel="stylesheet" href="css/font-awesome.css">
		<link rel="stylesheet" href="css/home.css">
	</head>

	<body>
		<div class="wraper">
			<!-- 导航 -->
			<div class="header">
				<a href="index.html"><img src="img/logo.png" class="logo"></a>
				<span class="menubtn" status="0">
                <i></i>
                <i></i>
                <i></i>
            	</span>
			</div>

			<!-- 分区 -->
			<div class="sectionwrap" data-num="0">
				<div class="section" id="main">
					<video loop autoplay="autoplay">
						<!-- <source src="/Public/Common/video/back.mp4" type="video/mp4"><source>
                    <source src="/Public/Common/video/back.mp4" type="video/ogv"><source>
                    <source src="/Public/Common/video/back.mp4" type="video/webm"><source> -->
						<source src="https://oa6dz61c8.qnssl.com/back.mp4" type="video/mp4">
						<source>
						<source src="https://oa6dz61c8.qnssl.com/back.mp4" type="video/ogv">
						<source>
						<source src="https://oa6dz61c8.qnssl.com/back.mp4" type="video/webm">
						<source>
					</video>
					<div class="colormask">
						<div class="textwrap">
							<br>
							<p class="index-content">更懂用户更懂创业者的</p>
							<p class="index-content">互联网产品解决方案服务平台</p>
							<p class="index-content">专注微信、互联网+ 功能开发与运营</p>
							<a href="service.html" title=""><span class="contact transition">选择服务</span></a>
						</div>
					</div>
				</div>
				<div class="section" id="sec01">
					<video loop autoplay="autoplay">
						<!--<source src="/Public/Common/video/guanxi.mp4" type="video/mp4"><source>-->
						<source src="https://oa6dz61c8.qnssl.com/guanxi.mp4" type="video/mp4">
						<source>
					</video>
					<div class="colormask">
						<div class="textwrap">
							<p class="index-title">网站</p>
							<p class="index-content">PC网站与手机网站定制设计开发</p>
							<a href="service.html" title=""><span class="contact transition">选择服务</span></a>
						</div>
					</div>
				</div>
				<div class="section" id="sec02">
					<div class="colormask">
						<div class="textwrap">
							<p class="index-title">微信</p>
							<p class="index-content">基于微信公众号的应用设计开发</p>
							<a href="service.html" title=""><span class="contact transition">选择服务</span></a>
						</div>
					</div>
				</div>
				<div class="section" id="sec03">
					<div class="colormask">
						<div class="textwrap">
							<p class="index-title">APP</p>
							<p class="index-content">基于iOS和安卓的应用设计开发</p>
							<a href="service.html" title=""><span class="contact transition">选择服务</span></a>
						</div>
					</div>
				</div>
				<div class="section" id="sec04">
					<div class="colormask">
						<div class="textwrap hellowrap">
							<h1>GO</h1>
							<a href="service.html" title=""><span class="contact transition">选择服务</span></a>
						</div>
					</div>
				</div>
			</div>

			<!-- 状态 -->
			<div id="zhuangt" class="status hidden-sm hidden-xs">
				<ul>
					<li><span class="status_bar select"></span></li>
					<li><span class="status_bar"></span></li>
					<li><span class="status_bar"></span></li>
					<li><span class="status_bar"></span></li>
					<li><span class="status_bar"></span></li>
				</ul>
			</div>

			<!-- 下一页 -->
			<span class="nextbtn transition"><i class="fa fa-angle-down"></i></span>

			<!-- 隐藏菜单 -->
			<div class="menu_hide">
				<div class="menu-mask"></div>
				<a href="index.html" class="name">
					<img src="img/logo.png" alt="">
				</a>
				<ul class="nav">
					<li>
						<a href="./service.html">
							<span>解决方案</span>
							<i class="fa fa-angle-right fa-lg" name="angle"></i>
						</a>	
					</li>
					<li>
						<a href="./cases.html">
							<span>案例精选</span>
							<i class="fa fa-angle-right fa-lg" name="angle"></i>
						</a>
					</li>
					<li>
						<a href="./brand.html">
							<span>服务品牌</span>
							<i class="fa fa-angle-right fa-lg" name="angle"></i>
						</a>
					</li>
					<li>
						<a href="./joinus.html">
							<!-- <i class="fa fa-rocket"></i> -->
							<span>加入我们</span>
							<i class="fa fa-angle-right fa-lg" name="angle"></i>
						</a>
					</li>
				</ul>
				<img src="img/guanbi.svg" class="closemenu transition">
			</div>
		</div>

		<script src="js/jquery-2.1.4.js"></script>
		<script src="js/home.js"></script>
		<script>
			$(document).ready(function() {
				/*设置首页Warp高度*/
				var winHeight = $(window).height();
				var winWidth = $(window).width();
				$("div.wraper, div.sectionwrap, div.section, div.colormask").height(winHeight);
				$(window).resize(function() {	
					var winHeight = $(window).height();
					var winWidth = $(window).width();
					$("div.wraper, div.sectionwrap, div.section, div.colormask").height(winHeight);
					videosize();
				});

				function videosize() {
					var box_h = $('#main').height();
					var bl = 1.777;
					var video_w = $('#main').width();
					var video_h = video_w / bl;
					if(box_h > video_h) {
						video_h = box_h;
						video_w = video_h * bl;
					};
					$('#main video').width(video_w).height(video_h);
				}
				videosize();

				/* xs/sm移出视频 */
				if(winWidth <= 992) {
					$('video').remove();
				};

			});

			/*鼠标滚珠上下滑动*/
			var topx = 0
			var status = 0;
			$(window).bind('mousewheel DOMMouseScroll', function(event) {
				var obj = $("div.sectionwrap");
				var num = obj.attr('data-num') * 1;
				var winHeight = $(window).height();
				//console.log(event.originalEvent.wheelDelta,event.originalEvent.detail)
				//console.log(event.deltaY, event.deltaFactor, event.originalEvent.deltaMode, event.originalEvent.wheelDelta);
				if(event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
					if(num > 0 && status == 0) {
						status = 1;
						topx = -(num - 1) * winHeight;
						obj.css('top', topx + "px");
						$('#zhuangt li').find('span').removeClass('select');
						$('#zhuangt li').eq(num - 1).find('span').addClass('select');
						setTimeout(function() {
							status = 0;
							obj.attr('data-num', num - 1);
							if(num === 4) {
								$('.nextbtn').find('i').attr('class', 'fa fa-angle-down');
							};
						}, 800);
					};
				} else {
					if(num < 4 && status == 0) {
						status = 1;
						topx = -(num + 1) * winHeight;
						obj.css('top', topx + "px");
						$('#zhuangt li').find('span').removeClass('select');
						$('#zhuangt li').eq(num + 1).find('span').addClass('select');
						setTimeout(function() {
							status = 0;
							obj.attr('data-num', num + 1);
							<!-- 0开始，N-2 -->
							if(num === 3) {
								$('.nextbtn').find('i').attr('class', 'fa fa-angle-up');
							};
						}, 800);
					};
				}
			});

			$('.nextbtn').click(function() {
				$(this).css('background', 'rgba(0,0,0,0.3)');
				setTimeout(function() {
					$('.nextbtn').css('background', 'none');
				}, 100);
				var obj = $("div.sectionwrap");
				var num = obj.attr('data-num') * 1;
				var winHeight = $(window).height();
				if(num < 4 && status == 0) {
					status = 1;
					topx = topx - winHeight;
					obj.css('top', topx + "px");
					$('#zhuangt li').find('span').removeClass('select');
					$('#zhuangt li').eq(num + 1).find('span').addClass('select');
					setTimeout(function() {
						status = 0;
						obj.attr('data-num', num + 1);
						if(num === 3) {
							$('.nextbtn').find('i').attr('class', 'fa fa-angle-up');
						};
					}, 600);
				}
				if(num == 4 && status == 0) {
					status = 1;
					topx = 0;
					obj.css('top', "0px");
					$('#zhuangt li').find('span').removeClass('select');
					$('#zhuangt li').eq(0).find('span').addClass('select');
					setTimeout(function() {
						status = 0;
						obj.attr('data-num', 0);
						$('.nextbtn').find('i').attr('class', 'fa fa-angle-down');
					}, 600);
				};
			});

			$('#zhuangt li').click(function() {
				var obj = $("div.sectionwrap");
				var num = $(this).index();
				var winHeight = $(window).height();
				status = 1;
				topx = -(num * winHeight);
				obj.stop().animate({
					top: topx + "px"
				}, 300, function() {
					status = 0;
					obj.attr('data-num', num);
					$('#zhuangt li').find('span').removeClass('select');
					$('#zhuangt li').eq(num).find('span').addClass('select');
				});
				obj.css('top', topx + "px");
				$('#zhuangt li').find('span').removeClass('select');
				$('#zhuangt li').eq(num).find('span').addClass('select');
				setTimeout(function() {
					status = 0;
					obj.attr('data-num', num);
					if(num === 3) {
						$('.nextbtn').find('i').attr('class', 'fa fa-angle-up');
					} else {
						$('.nextbtn').find('i').attr('class', 'fa fa-angle-down');
					};
				}, 600);
			});
		</script>
	</body>

</html>